<template>
  <div class="gis-popup">
    <div class="title">
      {{ name }}
    </div>
    <div class="xf-summary" v-if="HomeService.tabType.value === TAB_TYPE.KXFF">监管单位 {{ tsgz.jgdw }} 家</div>
    <div class="main">
      <template v-if="HomeService.tabType.value === TAB_TYPE.TSGZ">
        <div class="level">
          <span>风险等级</span>
          <span>安全</span>
        </div>
        <div class="echarts">
          <InstrumentEchart :echarts-data="tsgz.score" />
          <div class="score">
            <span>{{tsgz.score}}</span>
            <span>分</span>
          </div>
        </div>
        <div class="text">接入社会单位（家）:{{ tsgz.jrdw }}</div>
        <div class="text">接入重点单位（家）:{{ tsgz.jrjxcs }}</div>
        <div class="text">接入设施设备（台）:{{ tsgz.jrsssb }}</div>
      </template>
      <template v-if="HomeService.tabType.value === TAB_TYPE.ZHYP">
        <div class="item">
          <span>今日火灾</span>
          <span>{{ tsgz.jrhz }}</span>
        </div>
        <div class="item">
          <span>本月火灾</span>
          <span>{{ tsgz.byhz }}</span>
        </div>
        <div class="item">
          <span>今年火灾</span>
          <span>{{ tsgz.jnhz }}</span>
        </div>
      </template>
      <template v-if="HomeService.tabType.value === TAB_TYPE.ZHJG">
        <div class="item">
          <span>当前隐患数</span>
          <span>{{ tsgz.dqyhs }}</span>
        </div>
        <div class="item">
          <span>技术服务机构</span>
          <span>{{ tsgz.jsfwjg }}</span>
        </div>
        <div class="item">
          <span>微型消防站</span>
          <span>{{ tsgz.wxxfz }}</span>
        </div>
      </template>
      <template v-if="HomeService.tabType.value === TAB_TYPE.KXFF">
        <div class="item">
          <span>下发整改通知</span>
          <span>{{ tsgz.xfzgtz }}</span>
        </div>
        <div class="item">
          <span>下发整改短信</span>
          <span>{{ tsgz.xfzgdx }}</span>
        </div>
        <div class="item">
          <span>下发巡查计划</span>
          <span>{{ tsgz.xfxcjh }}</span>
        </div>
      </template>
      <template v-if="HomeService.tabType.value === TAB_TYPE.SJJR">
        <div class="item">
          <span>数据量</span>
          <span>{{ tsgz.sjl }}</span>
        </div>
        <div class="item">
          <span>申请用户数</span>
          <span>{{ tsgz.sqyhs }}</span>
        </div>
        <div class="item">
          <span>对接系统数</span>
          <span>{{ tsgz.djxts }}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {defineComponent, onUnmounted, computed} from 'vue';
import InstrumentEchart from "@/components/echarts/instrumentEchart.vue";
import {tsgzData} from './mockData';
import {HomeService, TAB_TYPE} from '../home/homeService';
import _isFunction from 'lodash-es/isFunction';

interface Props {
  name: string;
  handleClose: () => void;
}

const props = defineProps<Props>();
const tsgz = computed(() => {
  return tsgzData[props.name as keyof typeof tsgzData] || {};
});

// 关闭弹窗
function close() {
  if (_isFunction(props.handleClose)) {
    props.handleClose();
  }
}

onUnmounted(() => {
  close();
});

defineComponent({name: 'GisPopup'});
</script>

<style scoped lang="scss">
.gis-popup {
  @apply w-[285px];

  .title {
    @apply relative w-full h-[50px] pl-[40px] flex text-[20px] leading-[40px] font-bold;
    font-family: Alibaba PuHuiTi;
    background: url('./assets/title.png') no-repeat center;

    &::before {
      content: '';
      @apply inline-block w-[12px] h-[12px] absolute top-[14px] left-[18px];
      background: url('./assets/dz.png') no-repeat center;
    }
  }

  .xf-summary {
    @apply absolute top-[10px] right-[18px] text-[16px] text-[#DAAD17];
    font-family: Alibaba PuHuiTi;
  }

  .main {
    @apply w-full min-h-[195px] px-[16px] pt-[20px] pb-[20px] -translate-y-[10px];
    background: rgba(11, 30, 56, 0.88);
    border: 1px solid #179cf1;
    border-top: none;

    .level {
      @apply flex justify-end items-center mb-[10px];

      span:last-child {
        @apply inline-block w-[50px] h-[20px] ml-[5px] text-[12px] text-center leading-[20px];
        background: url('./assets/level.png') no-repeat center;
      }
    }

    .echarts {
      @apply relative w-full h-[200px];

      .score {
        @apply absolute bottom-[20px] left-1/2 w-[140px] h-[27px] text-center leading-[27px];
        transform: translateX(-50%);
        background: url('./assets/score.png') no-repeat center;

        span {
          @apply text-[24px] font-bold;
          font-family: D-DIN-PRO;
        }

        span:last-child {
          @apply text-[16px];
        }
      }
    }

    .text {
      font-family: Alibaba PuHuiTi;
    }

    .item {
      @apply relative w-full h-[44px] px-[18px] mb-[12px] flex items-center justify-between;
      background: linear-gradient(0deg, #06356a 0%, #00569e 100%);
      border: 1px solid #117fde;

      &:last-child {
        @apply mb-0;
      }

      span:first-child {
        @apply text-[16px];
        font-family: Alibaba PuHuiTi;
      }

      span:last-child {
        @apply text-[22px];
        font-family: D-DIN-PRO;
      }

      &:after {
        @apply absolute top-0 right-0 inline-block w-[8px] h-[8px];
        content: '';
        background: url('./assets/jb.png') no-repeat center;
      }
    }
  }
}
</style>
